style: Clean up lockscreen styles to improve HC support

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3154>

diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index 0997d76aa700fb6ed72a9e8c89b907d7d5ef2c48..32c90ded2f3e4209daaeaa54f447de3dd9e23b41 100644 (file)
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -366,6 +366,17 @@ stage {
 
 /* Lockscreen Elements */
 
+// buttons
+%lockscreen_button {
+  @extend %button_common;
+  @include button(normal, $tc:$system_fg_color, $style: lockscreen);
+  &:focus { @include button(focus, $tc:$system_fg_color, $style: lockscreen);}
+  &:hover { @include button(hover, $tc:$system_fg_color, $style: lockscreen);}
+  &:active { @include button(active, $tc:$system_fg_color, $style: lockscreen);}
+  &:checked { @include button(checked, $tc:$system_fg_color, $style: lockscreen);}
+  &:insensitive { @include button(insensitive, $tc:$system_fg_color, $style: lockscreen);}
+}
+
 // entries
 %lockscreen_entry {
   @extend %entry_common;

diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss
index 60fd49ab6a0bf6d99ab80b4c8c1affa7e3bc287e..167cff70f7b360c0939619a076049bb56fba5580 100644 (file)
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_drawing.scss
@@ -94,7 +94,7 @@
 
   // entry color overrides for lockscreen style
   @if $style == 'lockscreen' {
-    $entry_bg_color: transparentize($c, 0.95);
+    $entry_bg_color: transparentize($c, .9);
     $entry_focus_color: transparentize($entry_fg_color, 0.6);
     @if $contrast == 'high' {
       $entry_focus_color: transparentize($entry_fg_color, 0.3);
@@ -211,6 +211,14 @@
     $checked_active_button_bg_color: lighten($checked_button_bg_color, $active_factor);
   }
 
+  // background color overrides for the lockscreen style
+  @if $style == 'lockscreen' {
+    $button_bg_color: transparentize($tc, .9);
+    $hover_button_bg_color: transparentize($tc, .87);
+    $active_button_bg_color: transparentize($tc, .84);
+    $active_hover_button_bg_color: transparentize($tc, .81);
+  }
+
   // flat style overrides
   @if $style == 'flat' {
     $insensitive_button_bg_color: $button_bg_color;

diff --git a/data/theme/gnome-shell-sass/widgets/_login-lock.scss b/data/theme/gnome-shell-sass/widgets/_login-lock.scss
index 38b9fd5134ce77823d6fb3853ee6ae73a0b14e14..ae3fc7d8d3da2ab1c3d357d1ffd74f8f7f92363b 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_login-lock.scss
+++ b/data/theme/gnome-shell-sass/widgets/_login-lock.scss
@@ -1,8 +1,8 @@
-$_gdm_bg: $system_bg_color;
+$_gdm_bg: $system_base_color;
 $_gdm_fg: $system_fg_color;
-$_gdm_dialog_width: 23em;
+$_gdm_dialog_width: 25em;
 
-// common style for gdm and lockscreen
+// common style for login and lockscreen
 .login-dialog,
 .unlock-dialog {
   color: $_gdm_fg;
@@ -11,14 +11,24 @@ $_gdm_dialog_width: 23em;
   .login-dialog-message-warning {
     color: $_gdm_fg;
   }
+
+  .login-dialog-prompt-layout {
+    width: $_gdm_dialog_width;
+    spacing: $base_padding * 1.5;
+  }
 }
 
-/* Login Dialog */
+// GDM Login Dialog
+// uses dark grey system styles
 .login-dialog {
   background-color: $_gdm_bg;
+
+  .login-dialog-prompt-entry {
+    @extend %system_entry;
+  }
 }
 
-// buttons
+// buttons on login screen
 .login-dialog-button {
 
   &.cancel-button,
@@ -34,38 +44,58 @@ $_gdm_dialog_width: 23em;
 }
 
 .login-dialog-button-box {
-  width: $_gdm_dialog_width;
   spacing: $base_padding * 2;
 }
 
 .login-dialog-logo-bin {
-  margin:3em 0;
+  margin: 3em 0;
+}
+
+.login-dialog-banner-view {
+  max-width: $_gdm_dialog_width;
+
+  .login-dialog-banner {
+    color: darken($_gdm_fg,10%);
+  }
+}
+
+.login-dialog-message {
+  text-align: center;
+}
+
+.login-dialog-user-selection-box {
+  // padding to ensure the box doesn't overlap the panel
+  padding-top: 4em;
+  padding-bottom: 8em;
 }
-.login-dialog-banner { color: darken($_gdm_fg,10%); }
-.login-dialog-banner-view { max-width: $_gdm_dialog_width; }
-.login-dialog-message { text-align: center; }
-.login-dialog-user-selection-box { padding: 100px 0px; }
 
 .login-dialog-not-listed-label {
   @extend %heading;
-  font-weight: bold;
-  color: darken($_gdm_fg,30%);
-  padding: $base_padding * 2;
+  padding: $base_padding;
+}
 
-  .login-dialog-not-listed-button:focus &,
-  .login-dialog-not-listed-button:hover & {
-    color: $_gdm_fg;
-  }
-  .login-dialog-not-listed-button:focus & {
-    text-decoration: underline;
-  }
+.login-dialog-not-listed-button {
+  // use button styling
+  @extend %button_common;
+  @include button(normal, $tc:$_gdm_fg, $c:$_gdm_bg, $style: flat, $always_dark: true);
+  &:focus { @include button(focus, $tc:$_gdm_fg, $c:$_gdm_bg, $style: flat, $always_dark: true);}
+  &:hover { @include button(hover, $tc:$_gdm_fg, $c:$_gdm_bg, $style: flat, $always_dark: true);}
+  &:active { @include button(active, $tc:$_gdm_fg, $c:$_gdm_bg, $style: flat, $always_dark: true);}
+
+  padding: 0 $base_padding;
+  margin: $base_padding;
+}
+
+// Authentication methods list
+.login-dialog-auth-list-view {
+  -st-vfade-offset: 3em;
 }
 
-.login-dialog-auth-list-view { -st-vfade-offset: 1em; }
 .login-dialog-auth-list {
   spacing: $base_padding;
   margin-left: 2em;
 }
+
 .login-dialog-auth-list-title {
   margin-left: 2em;
 }
@@ -83,82 +113,69 @@ $_gdm_dialog_width: 23em;
 
 .login-dialog-auth-list-label {
   @extend %title_4;
-  font-weight: bold;
   &:ltr { padding-left: $base_padding * 2.5; text-align: left; }
   &:rtl { padding-right: $base_padding * 2.5; text-align: right; }
 }
 
-.login-dialog-user-list-view { -st-vfade-offset: 1em; }
 
-.login-dialog-user-list {
-  spacing: $base_padding * 2;
+// User list
+.login-dialog-user-list-view {
   width: $_gdm_dialog_width;
+  -st-vfade-offset: 3em;
+
+  .login-dialog-user-list {
+    margin: 0 $base_margin * 2; // margin to account for scrollbar
+    spacing: $base_padding * 2;
+
+    .login-dialog-user-list-item {
+      // use button styling
+      @extend %button_common;
+      @include button(normal, $tc:$_gdm_fg, $c:$system_base_color, $always_dark: true);
+      &:selected,
+      &:focus { @include button(focus, $tc:$_gdm_fg, $c:$system_base_color, $always_dark: true);}
+      &:hover { @include button(hover, $tc:$_gdm_fg, $c:$system_base_color, $always_dark: true);}
+      &:active { @include button(active, $tc:$_gdm_fg, $c:$system_base_color, $always_dark: true);}
+
+      border-radius: $modal_radius;
+      padding: $base_padding * 1.5;
+
+      // create border for indicating logged in user
+      .user-icon {
+        border: 2px solid transparent;
+      }
 
-  .login-dialog-user-list-item {
-    border-radius: $base_border_radius + $base_margin;
-    padding: $base_padding;
-    background-color: transparentize($_gdm_fg, .95);
-    color: $_gdm_fg;
-
-    @if $contrast == 'high' {
-      box-shadow:inset 0 0 0 1px $hc_inset_color;
-    }
-
-    .user-widget .user-icon {
-      border: 4px solid transparent;
-    }
-
-    .login-dialog-timed-login-indicator {
-      height: 2px;
-      margin-top: $base_padding;
-      background-color: darken($_gdm_fg, 30%);
-    }
-
-    &:focus .login-dialog-timed-login-indicator { background-color: $selected_fg_color; }
-  }
-
-  &:expanded .login-dialog-user-list-item {
-    transition-duration: 300ms;
-    transition-timing-function: ease;
-
-    &:hover {
-      background-color: transparentize($_gdm_fg, .9);
-      color: $_gdm_fg;
-    }
-
-    &:selected {
-      background-color: $selected_bg_color;
-      color: $selected_fg_color;
-      &:hover { background-color: lighten($selected_bg_color,5%); }
-    }
+      .login-dialog-timed-login-indicator {
+        height: 2px;
+        margin-top: $base_padding;
+        background-color: transparentize($_gdm_fg, .3);
+      }
 
-    &:logged-in {
-      .user-widget .user-icon {
-        border-color: $selected_bg_color;
+      &:logged-in {
+        // color border for logged-in user
+        .user-icon {
+          border-color: $selected_bg_color;
+          StIcon {
+            background-color: transparentize($selected_bg_color, .7);
+          }
+        }
       }
     }
   }
 }
 
-.login-dialog-prompt-layout {
-  spacing: $base_padding * 2;
-  width: 26em;
-}
-
-.login-dialog-prompt-entry {
-  @extend %system_entry;
-}
-
-
-/* Screen Shield */
-// a.k.a. the lockscreen
-
+// Screen Shield
+// a.k.a. the lockscreen, uses transparent styles
 .unlock-dialog {
   background-color: transparent;
 
   .login-dialog-prompt-entry {
     @extend %lockscreen_entry;
   }
+
+  .button,
+  .icon-button {
+    @extend %lockscreen_button;
+  }
 }
 
 .screen-shield-background { // just the shadow, really
@@ -240,7 +257,7 @@ $_gdm_dialog_width: 23em;
   font-weight: bold;
   padding: 0 $base_padding * 2;
   color: $_gdm_fg;
-  background-color: transparentize($_gdm_fg, 0.9);
+  background-color: transparentize($_gdm_fg, .9);
   border-radius: $forced_circular_radius;
 }
 
@@ -252,6 +269,19 @@ $_gdm_dialog_width: 23em;
     color: $_gdm_fg;
   }
 
+  & .user-icon {
+    border-radius: $forced_circular_radius;
+    StIcon {
+      background-color: transparentize($_gdm_fg, .87);
+      color: $_gdm_fg;
+
+      @if $contrast == 'high' {
+        background-color: transparentize($_gdm_fg, .7);
+        box-shadow:inset 0 0 0 1px $hc_inset_color;
+      }
+    }
+  }
+
   // layout of the user list
   &.horizontal {
     spacing: $base_padding * 3;
@@ -260,14 +290,11 @@ $_gdm_dialog_width: 23em;
     }
 
     .user-icon {
-      border-radius: $forced_circular_radius;
+      icon-size: $base_icon_size * 4;
 
       & StIcon {
         padding: $base_padding * 2;
         icon-size: $base_icon_size * 2;
-        width: $base_icon_size * 3;
-        height:  $base_icon_size * 3;
-        background-color: transparentize($_gdm_fg, 0.9);
       }
     }
   }
@@ -288,7 +315,6 @@ $_gdm_dialog_width: 23em;
       & StIcon {
         padding: $base_padding * 4;
         icon-size: $base_icon_size * 4;
-        background-color: transparentize($_gdm_fg, 0.9);
       }
     }
   }